<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col />
        <el-col>
          <el-row type="flex" justify="end">
            <el-button type="primary" round @click="addbtn('1', '0')">添加权限</el-button>
            <slot name="after" />
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="title" label="权限名称" width="180" />
      <el-table-column prop="code" label="权限标识" width="180" />
      <el-table-column prop="description" label="权限描述" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" @click="addbtn('2',row.id)">添加子权限</el-button>
          <el-button @click="diebtn(row.id)">编辑</el-button>
          <el-button type="danger" @click="delbtn(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增权限" :visible="showDialog" @close="closeFn">

      <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="权限名称" prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formData.code" />
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="formData.description" />

        </el-form-item></el-form>
      <template v-slot:footer>
        <el-row type="flex" justify="center">
          <el-button type="primary" size="small" @click="submit">确定</el-button>
          <el-button size="small" @click="closeFn">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { listTotree } from '@/utils'
import { getPermission, delPermision, editPermision, addPermission, OnePerNumber } from '@/api/model/permission'
export default {
  data() {
    return {
      tableData: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      showDialog: false,
      formData: {
        id: '',
        title: '', // 权限名
        code: '', // 权限标识
        description: '', // 权限描述
        // enVisible: '1', // 是否开启
        type: null, // 1表示添加1级权限，2表示添加2级权限
        pid: '' // 父级权限的id
      },
      rules: {
        title: [
          { required: true, message: '权限名称不能为空！', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '权限标识不能为空！', trigger: 'blur' }
        ]
      },
      params: {
        _limit: 5,
        _start: 0
      },
      total: ''
    }
  },
  created() {
    this.getPermission()
  },
  methods: {
    // 删除
    delbtn(id) {
      this.$confirm('确定要删除嘛', '提示', {
        type: 'waring'
      }).then(async() => {
        await delPermision(id)
        this.addRole()
        this.showDialog = false
      })
    },
    submit() {
      // 表单校验
      this.$refs.form.validate(async bool => {
        if (bool) {
          if (this.formData.id) {
            // 有id说明是编辑
            this.formData.type = +this.formData.type
            const res = await editPermision(this.formData)
            console.log(res)
            this.getPermission()
          } else {
            // 否则新增
            // 校验通过 --- 调用新增接口
            const res = await addPermission(this.formData)
            console.log(res)
            this.getPermission()
          }
          // 关闭弹窗

          // 刷新列表
          this.getPermission()
          this.closeFn()
        }
      })
    },
    // 获取接口列表
    async getPermission() {
      const res = await getPermission()
      console.log(res)
      // res.tableData = listTotree(res.data, '0')
      const newList = listTotree(res.data, '0')
      this.tableData = newList
    },
    currentChange(page) {
      this.params._start = page * this.params._limit - 2
      this.getPermission()
    },
    closeFn() {
      this.showDialog = false
      // 清除数据
      this.formData = {
        title: '', // 权限名
        code: '', // 权限标识
        description: '', // 权限描述
        // enVisible: '1', // 是否开启
        type: null, // 1表示添加1级权限，2表示添加2级权限
        pid: '' // 父级权限的id
      }
      // 清空校验规则
      this.$refs.form.resetFields()
    },
    addbtn(pid, type) {
      this.formData.pid = pid

      this.formData.type = type
      this.showDialog = true
    },
    // 编辑anniu
    async diebtn(id) {
      this.formData.id = id
      console.log(id)
      this.showDialog = true
      const res = await OnePerNumber(id)
      // console.log(res)
      this.formData = res.data
    }

  }
}
</script>
<style>

</style>
